/**
 * 主页面
 */
import React, {useState} from 'react';
import {StatusBar, StyleSheet, Text, View} from 'react-native';
import {
  windowHeight,
  windowStatusBarHeight,
  windowWidth,
} from '../../utils/commonUtils';
import {TabBar} from '@ant-design/react-native';
import {
  INDEX,
  INDEXSELECTD,
  MY,
  MYSELECTED,
  COLLECTION,
  COLLECTIONSELECTED,
} from '../../image';
import {Home} from '../home/Home';
import {My} from '../my/My';
import {Collection} from '../collection/Collection';

export const Main = () => {
  //存储选中
  const [selectedTab, setselectedTab] = useState('index');

  const renderContent = () => {
    return (
      <View style={{flex: 1, backgroundColor: 'white'}}>
        {selectedTab === 'index' ? (
          <Home />
        ) : selectedTab === 'my' ? (
          <My />
        ) : (
          <Collection />
        )}
      </View>
    );
  };
  // 选中
  const onChangeTab = tabName => {
    setselectedTab(tabName);
  };
  return (
    <View style={styles.main_box}>
      <StatusBar
        translucent={true}
        backgroundColor="transparent"
        barStyle={'dark-content'}
      />
      <TabBar
        unselectedTintColor="#707070"
        tintColor="#383838"
        barTintColor="#FFFFFF">
        <TabBar.Item
          title="首页"
          icon={INDEX}
          selectedIcon={INDEXSELECTD}
          selected={selectedTab === 'index'}
          onPress={() => onChangeTab('index')}>
          {renderContent()}
        </TabBar.Item>
        <TabBar.Item
          icon={MY}
          selectedIcon={MYSELECTED}
          title="我的"
          selected={selectedTab === 'my'}
          onPress={() => onChangeTab('my')}>
          {renderContent()}
        </TabBar.Item>
        <TabBar.Item
          icon={COLLECTION}
          selectedIcon={COLLECTIONSELECTED}
          title="收藏"
          selected={selectedTab === 'collection'}
          onPress={() => onChangeTab('collection')}>
          {renderContent()}
        </TabBar.Item>
      </TabBar>
    </View>
  );
};
const styles = StyleSheet.create({
  main_box: {
    width: windowWidth,
    height: windowHeight + windowStatusBarHeight,
    // height: windowHeight,
  },
});
